<template>
	<div class="container">
		<div class="content">
			<div class="logo"></div>
			
			<div>
				<div class="menu" @click="openPage('home_page')"
					:class="menu=='home_page'?'menu_active':''" >
					首页
				</div>
				<!--<div class="menu" @click="openPage('course_detail')"
					:class="menu=='course_detail'?'menu_active':''" >
					课程详情
				</div>-->
				<!--<div class="menu" @click="openPage('thinking_course')"
					:class="menu=='thinking_course'?'menu_active':''" >
					思维课程
				</div>-->
				<div class="menu" @click="openPage('download_center')"
					:class="menu=='download_center'?'menu_active':''" >
					下载中心
				</div>
				<div class="menu" @click="openPage('about')"
					:class="menu=='about'?'menu_active':''" >
					关于我们
				</div>
				<div class="menu" v-if="user" @click="openPage('personal_center')"
					:class="menu=='personal_center'?'menu_active':''" >
					个人中心
				</div>
			</div>
			
			<div v-if="user" class="top_work">
		        <!--头像和姓名-->
		        <div class="top_name" @click="showWorkList()">
		          {{ user.clueEntity.realName||user.username }}
		          <div class="top_portrait" :style="{backgroundImage:'url('+(user.photo||portrait)+')'}"></div>
		          <div class="top_more"></div>
		        </div>
		        <!--下拉列表-->
		        <div class="top_list" tabindex="1">
			        <div class="top_li" @click="logout()" data-id="3"
			            :class="overWorkId == 3 ? 'top_li_over' : ''" >
						退出
			        </div>
			        <div class="top_li" v-if="debug" @click="openDebug()"
			             data-id="4" :class="overWorkId == 4 ? 'top_li_over' : ''">
						调试服务
			        </div>
		        </div>
		    </div>
		    
			<template v-else>
				<div class="register_btn" @click="openRegister()">注册</div>
				<div class="login_btn" @click="openLogin()">登录</div>
			</template>
			
			<div class="phone">
				<div class="phone_left">
					客服<br/>
					热线
				</div>
				<div class="phone_right">
					010-8748-4928
					<br>189-1163-6512
				</div>
			</div>
		</div>
		
		<el-dialog title="调试服务" :visible.sync="isOpenDebug" width="6rem">
		    <span class="ip_label">服务地址</span>
		    &emsp;
		    <el-input v-model="baseUrl" class="ip_input" spellcheck="false" clearable></el-input>
		    <span slot="footer" class="dialog-footer">
		        <el-button @click="isOpenDebug = false">取 消</el-button>
		        <el-button type="primary" @click="closeDebug()">确 定</el-button>
		    </span>
	    </el-dialog>
	</div>
</template>

<script>
var vm, $workList, $home;
export default {
	data : function() {
		return {
			menu : "home_page",
			pathMap : {
				home_page : "/home_page/index",  //首页
				course_detail : "/course_detail/course_detail",  //课程详情
				thinking_course : "/thinking_course/thinking_course",  //思维课程
				download_center : "/download_center/download_center",  //下载中心
				personal_center : "/personal_center/person_curriculum",  //个人中心
				about : "/about/about" //关于我们
			},
			overWorkId: null,
			debug: config.debug,
			baseUrl: null,
      		isOpenDebug: false,
      		portrait : require("@/assets/img/account/default_photo.png")
		}
	},
	computed : {
		user : function() {
			return vm.$store.state.user;
		}
	},
	methods : {
		openRegister : function() {
			//打开注册页
			router.push("/account/register");
		},
		openLogin : function() {
			//打开登录页
			router.push("/account/login");
		},
		openPage : function(index) {
			vm.menu = index;
			router.push(vm.pathMap[index]);
		},
		showWorkList: function() {
	      	if($workList.css("display") == "none") {
	        	vm.overWorkId = null;
	        	$workList.fadeIn(300);
	        	$workList.focus();
	      	}
	    },
		logout: function() {
	      	tool.confirm("确认退出?", {
	          	confirmButtonText: "确定",
	          	cancelButtonText: "取消",
	          	type: "warning"
	       	}).then(function() {
	          	api.logout({}).then(function() {
	          		//清除本地缓存token
	            	tool.removeItem(lsKey.token);
	            	vm.$store.commit("setUser",null);
	            	
	            	//页面要求必须登录状态,则跳转回首页
					if($route.meta.hasToken == true) {
						router.push("/");
					}
	          	});
	        });
	    },
	    changePassword: function() {
	      	vm.dialogFormVisible = true;
	    },
	    openDebug: function() {
	      	vm.isOpenDebug = true;
	      	vm.baseUrl = config.baseUrl;
	    },
	    closeDebug: function() {
	      	vm.isOpenDebug = false;
	      	config.baseUrl = vm.baseUrl;
	      	axios.defaults.baseURL = vm.baseUrl;
	    },
	    initWorkList : function() {
	    	$workList = $(".top_work .top_list");
		    var $li = $(".top_work .top_li");
		    //列表失去焦点隐藏
		    $workList.blur(function() {
		      $(this).fadeOut(300);
		    });
		    //添加鼠标覆盖样式
		    $li.mouseover(function(event) {
		      vm.overWorkId = $(event.target).attr("data-id");
		    });
	    }
	},
	watch:{
	  	$route(to,from) { //监听路由变化
	    	//从新的路径中截取当前模块名,设置为当前菜单
			var path = this.$route.path.substr(1);
			vm.menu = path.substring(0,path.indexOf("/"));
			$home.scrollTop(0);
	  	}
	},
	mounted : function() {
		$home = $("#home");
		vm.initWorkList();
	},
	created : function() {
		vm = this;
		//从当前路径中截取当前模块名,设置为当前菜单
		var path = vm.$route.path.substr(1);
		vm.menu = path.substring(0,path.indexOf("/"));
	}
}
</script>

<style scoped>
	.container {
		height: 0.8rem;
		background: rgb(255,255,255);
		border-bottom: 0.01rem solid #ededed;
	}
	.content {
		width: 12.3rem;
		height: 0.8rem;
		margin: 0 auto;
		/*outline: 1px solid red;*/
	}
	.logo {
		float: left;
		width: 3rem;
		height: 0.42rem;
		margin-top: 0.2rem;
		background: url(../../assets/img/common/logo.png) no-repeat
					center / 3rem 0.42rem;
		/*margin-left: 0.1rem;*/
		/*outline: 1px solid red;*/
	}
	
	.menu {
		float: left;
		height: 0.4rem;
		line-height: 0.4rem;
		font-size: 0.18rem;
		color: #343434;
		padding: 0 0.1rem;
		margin-left: 0.3rem;
		margin-top: 0.2rem;
		cursor: pointer;
		/*outline: 1px solid blue;*/
	}
	.menu:first-child {
		margin-left: 0.5rem;
	}
	.menu:hover {
		color: #1f9e5b;
	}
	.menu_active {
		color: #1f9e5b;
		font-weight: bold;
	}
	
	.register_btn,.login_btn {
		float: right;
		margin-top: 0.24rem;
		width: 0.7rem;
		height: 0.32rem;
		line-height: 0.32rem;
		border-radius: 0.16rem;
		font-size: 0.14rem;
		text-align: center;
		cursor: pointer;
	}
	.register_btn {
		margin-right: 0.1rem;
		color: white;
		background: rgb(54,170,125);
	}
	.register_btn:hover {
		background: #5ad2a0;
	}
	.login_btn {
		line-height: 0.3rem;
		margin-right: 0.16rem;
		color: #0c0c0c;
		border: 0.01rem solid #b7b7b7;
	}
	.login_btn:hover {
		background: #f3f3f3;
	}
	
	.top_work {
	  position: relative;
	  min-width: 1.2rem;
	  height: 100%;
	  text-align: center;
	  float: right;
	  margin-left: 0.4rem;
	  margin-right: 0.12rem;
	  /*padding: 0 0.4rem;*/
	  /*outline: 1px solid blue;*/
	}

	.top_name {
	  position: relative;
	  display: inline-block;
	  font-size: 0.18rem;
	  height: 0.4rem;
	  line-height: 0.4rem;
	  color: #333333;
	  /*outline: 1px solid red;*/
	  padding: 0 0.1rem;
	  margin-top: 0.21rem;
	  letter-spacing: 0.01rem;
	  cursor: pointer;
	}
	.top_portrait {
	  position: absolute;
	  top: 0;
	  left: -0.4rem;
	  width: 0.4rem;
	  height: 0.4rem;
	  border-radius: 0.2rem;
	  border: 0.01rem solid #d8dde6;
	  background-position: center;
	  background-size: cover;
	}
	.top_more {
	  position: absolute;
	  top: 0;
	  right: -0.12rem;
	  /*outline: 1px solid red;*/
	  width: 0.15rem;
	  height: 0.4rem;
	  background: url(../../assets/img/account/top_more.png) no-repeat 
	  			  center left / 0.12rem 0.08rem;
	}
	
	.top_work .top_list {
	  width: 1.4rem;
	  left: calc(50% - 0.7rem);
	}
	.top_list {
	  width: calc(100% - 0.02rem);
	  position: absolute;
	  z-index: 31;
	  left: 0.01rem;
	  top: 0.88rem;
	  background: white;
	  padding: 0.08rem 0;
	  border-radius: 0.04rem;
	  box-shadow: 0 0 0.2rem 0 rgba(0, 0, 0, 0.14);
	  display: none;
	}
	.top_list:focus {
	  outline: none;
	}
	.top_li {
	  height: 0.35rem;
	  line-height: 0.35rem;
	  color: #333333;
	  font-size: 0.18rem;
	  cursor: pointer;
	}
	.top_li_over {
	  background: #e6f6ee;
	}
	.top_li_active {
	  color: #3885f8;
	}
	
	.ip_label {
	 	font-size: 0.17rem;
	}
	.ip_input {
	  	font-size: 0.17rem;
	  	width: 4rem;
	}
	
	.phone {
		/*top: 1rem;*/
		float: right;
		width: 2.3rem;
		margin-top: 0.05rem;
		height: 0.7rem;
		border-radius: 0.35rem;
		color: #333333;
		/*outline: 1px solid red;*/
	}
	.phone_left {
		float: left;
		width: 0.7rem;
		margin-top: 0.1rem;
		padding-top: 0.05rem;
		height: 0.5rem;
		line-height: 0.2rem;
		padding-left: 0.26rem;
		font-size: 0.14rem;
		border-right: 0.01rem solid #e3e3e3;
	}
	.phone_right {
		float: left;
		width: 1.6rem;
		margin-top: 0.1rem;
		padding-top: 0.05rem;
		height: 0.5rem;
		line-height: 0.2rem;
		/*line-height: 0.5rem;*/
		padding-left: 0.16rem;
		font-size: 0.16rem;
		/*outline: 1px solid red;*/
	}
</style>